<template>
  <!-- 用户登录日志 -->
  <div class="view">
    <el-card>
      <div slot="header">
        <!--小标题  -->
        <span class="panel-title home-title">{{ $t("m.User_Session") }}</span>
        <!-- 行 -->
        <div class="filter-row">
          <!-- 用户名 -->
          <span>
            <vxe-input
              v-model="userName"
              :placeholder="$t('m.User_Name')"
              type="search"
              size="medium"
              @search-click="filterByKeyword"
              @keyup.enter.native="filterByKeyword"
            ></vxe-input>
          </span>
          &nbsp;
          <!-- 用户昵称 -->
          <span>
            <vxe-input
              v-model="nickName"
              :placeholder="$t('m.Nick_Name')"
              type="search"
              size="medium"
              @search-click="filterByKeyword"
              @keyup.enter.native="filterByKeyword"
            ></vxe-input>
          </span>
         <!-- 按钮 -->
          <span>
          <el-button
              type="primary"
              icon="el-icon-search"
              @click="filterByKeyword"
              size="small"
          >{{ $t('m.Search') }}
          </el-button>
        </span>
          <span text-align="right">在定时任务中可以配置定时删除登录日志</span>
        </div>
      </div>

      <!-- table表格 -->
      <vxe-table :data="sessionList" :align="center">
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="userName" :title="$t('m.User_Name')"></vxe-table-column>
        <vxe-table-column field="nickName" :title="$t('m.Nick_Name')"></vxe-table-column>
        <vxe-table-column field="realName" :title="$t('m.Real_Name')"></vxe-table-column>
        <vxe-table-column field="ip" :title="$t('m.IP')"></vxe-table-column>
        <vxe-table-column field="gmtCreate"   :formatter="formatDate"  :title="$t('m.Create_Time')" ></vxe-table-column>
      </vxe-table>
      <div class="panel-options" v-if="showPagination">
        <el-pagination
          class="page"
          layout="prev, pager, next, sizes"
          @current-change="currentChange"
          :page-size.sync="pageSize"
          :total.sync="total"
          :current-page.sync="currentPage"
          @size-change="onPageSizeChange"
          :page-sizes="[10, 30, 50, 100]"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import api from "@/common/api";
import XEUtils from "xe-utils";

export default {
  name: "session",
  components: {},
  data() {
    return {
      userName: "", //用户名,支持模糊搜索
      nickName: "", //用户id,支持模糊搜索
      currentPage: 1, //当前页数
      total: 0, //总页数
      pageSize: 10, //页,limit
      sessionList: [], //登录信息数据列表
      showPagination: false, //是否展示分页器
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.routeName = this.$route.name;
      let query = this.$route.query;

      this.pageSize = parseInt(query.pageSize) || 10;
      this.currentPage = query.currentPage || 1;
      this.keyword = query.keyword;

      this.filterByKeyword();
    },

    //页面改变事件
    currentChange(page) {
      this.currentPage = page;
      this.getUserSessionList(page);
    },

    onPageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getUserSessionList(this.currentPage);
    },

    //格式化时间
    formatDate({ cellValue }) {
      return XEUtils.toDateString(cellValue, "yyyy-MM-dd HH:mm:ss");
    },

    //获取用户登录列表
    getUserSessionList(page) {
      this.showPagination = false;
      this.loading = true;
      let params = {
        currentPage: this.currentPage,
        limit: this.pageSize,
        userName: this.userName,
        nickName: this.nickName,
      };

      api.getUserSessions(params).then(
        (res) => {
          console.log(res);
          this.loading = false;
          this.total = res.data.data.total;
          this.sessionList = res.data.data.records;
          console.log(this.sessionList);
          this.showPagination = true;
        },
        (err) => {
          this.loading = false;
          this.showPagination = true;
        }
      );
    },

    //按钮筛选
    filterByKeyword() {
      this.currentPage = 1;
      this.getUserSessionList(this.currentPage);
    },
  },
  watch: {
    $route() {
      this.init();
    },
  },
  computed: {},
};
</script>

<style scoped>
.filter-row {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .filter-row span {
    margin-right: 5px;
  }
}
@media screen and (min-width: 768px) {
  .filter-row span {
    margin-right: 20px;
  }
}
</style>
